<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div v-loading="canvasLoading" class="flowRight">
    <!-- 上部 -->
    <char-header v-show="!viewExperiment" />
    <!-- 下部 -->
    <div class="bottom" :class="{ 'readonly': viewExperiment }">
      <div class="editor-container" :style="{ width: graphWidth ? graphWidth + 'px' : '' , height: graphHeight ? graphHeight + 'px' : '' }">
        <editor-dag @editorGraphWidth="editorGraphWidth" />
      </div>
    </div>
    <right-property />
  </div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from "vue"
import EditorDag from 'src/pages/designerTool/canvas/DagEdit/index.vue'
import RightProperty from 'src/pages/designerTool/canvas/RightProperty/index.vue'
import CharHeader from './charHeader.vue'
import { designerStore } from 'src/stores/designerTool/designerTool'
const store=designerStore()
const graphWidth = ref(0)
const graphHeight = ref(0)
const canvasLoading = ref(false)
const viewExperiment = computed(() => {
  return !store.LeftTabsState
})

function editorGraphWidth(e: any) {
  graphWidth.value = e.width
  graphHeight.value=e.height
}
</script>
<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";
.flowRight {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 100;

  .bottom {
    height: calc(100% - 36px);
    position: relative;

    &.readonly {
      height: 100%;
    }

    .editor-container {
      height: 100%;
      position: relative;
    }
  }
}
</style>
